import useMediaQuery from '@hooks/useMediaQuery'
import classNames from 'classnames'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link, useNavigate } from 'react-router-dom'
import { Button, Card, CardBody, CardHeader, CardTitle } from 'reactstrap'
import CustomSpinner from '../../../components/spinner/Spinner'
import { getAllClientDocumentsAction } from '../../../redux/document/documentsAction'

const Started = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const { user } = useSelector((state) => state?.auth)
  const ClientName = `${user?.first_name || ''} ${user?.last_name || ''}`
  const tablet = useMediaQuery('(min-width: 700px)')
  const { getAllDocuments, loading } = useSelector((state) => state.document)
  const rows = getAllDocuments?.data
  const registered = rows && rows.find((item) => item.updated_at !== null)
  useEffect(() => {
    dispatch(getAllClientDocumentsAction())
  }, [])

  useEffect(() => {
    if (!!registered) {
      navigate('/documents/document')
    }
  }, [registered])

  return (
    <>
      {loading ? (
        <CustomSpinner />
      ) : (
        <>
          <Card className="padding-left margin-bottom-0">
            <CardHeader className="bgyellowish ">
              <CardTitle
                className={classNames({
                  'fw-bold black': true,
                  'px-2': tablet
                })}
              >
                Hi {ClientName}, Welcome to your Client Portal
              </CardTitle>
            </CardHeader>
            <CardBody className="py-2 p-x-3 started-cardBody card-body-styling ">
              <div>
                <p className="f-body-regular">
                  Hi <span className="fw-800 black">{ClientName},</span>
                </p>
                <p className="f-body-regular">
                  Please complete your profile and fill out the requested forms.
                  {tablet && <br />} Contact your provider directly If you have
                  any questions.
                </p>
                <p className="f-body-regular mb-2">Thank You!</p>
                <Button size="sm" className="reqbgColor  border-none px-2 ">
                  <Link
                    to="/documents/document"
                    className="start-btn fs-15n f-bold"
                  >
                    GET STARTED
                  </Link>
                </Button>
              </div>
            </CardBody>
          </Card>
        </>
      )}
    </>
  )
}

export default Started
